<template>
	<view>
		<view class="header">
			<view class="searchBox">
				<image src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%9D%9E%E7%BF%94%E6%B4%BB%E5%8A%A8/u1817.png"></image>
				<input placeholder="搜索课程/头条/活动"/>
			</view>
			<view class="searchBtn">
				<text>取消</text>
			</view>
		</view>
		<!-- 没有结果现实的内容 -->
		<view class="haveResult">
			<uni-section>
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content">
					<view v-if="current === 0" >
						<!-- <text class="content-text">选项卡1的内容</text> -->
						<view class="text">
							<image src="../../static/images/搜索背景图.png"></image>
							<view>没有找到与【外星人】相关的内容，请换个关键字试试吧~</view>
						</view>  
					</view>
					<view v-if="current === 1" >
						<!-- <text class="content-text">选项卡2的内容</text> -->
						<view class="text">
							<image src="../../static/images/搜索背景图.png"></image>
							<view>没有找到与【外星人】相关的内容，请换个关键字试试吧~</view>
						</view>
					</view>
					<view v-if="current === 2">
						<!-- <text class="content-text">选项卡3的内容</text> -->
						<view class="text">
							<image src="../../static/images/搜索背景图.png"></image>
							<view>没有找到与【外星人】相关的内容，请换个关键字试试吧~</view>
						</view>
					</view>
				</view>
			</uni-section>
		</view>
	</view>
</template>

<script lang="ts">
	import BottomText from '../../components/BottomText/BottomText.vue'
	
	export default {
		data() {
			return {
				items: ['热门课程', '教育头条', '非翔活动'],
				styles: [{
						value: 'text',
						text: '文字'
					}],
				current: 0,
				activeColor: '#333333',
				styleType: 'text'
			}
		},
		methods: {
			onClickItem(e) {
							if (this.current !== e.currentIndex) {
								this.current = e.currentIndex
							}
						},
		}
	}
</script>

<style lang="less" scoped>
.header{
		display: flex;
		justify-content: center;
		height: 80rpx;
		margin: 42rpx 0;
		line-height: 80rpx;
		.searchBox{
			display: flex;
			align-items: center;
			width: 572rpx;
			height: 80rpx;
			background-color: #f2f2f2;
			border-radius: 40px;
			image{
				width: 36rpx;
				height: 36rpx;
				margin-left: 34rpx;
				margin-right: 36rpx;
			}
			input{
				color: #9a9a9a;
			}
		}
		.searchBtn{
			color: #252525;
			font-size: 26rpx;
			margin-left: 38rpx;
		}
	}
	// 没搜索到结果
	.example-body {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			padding: 0;
	}
	
	.uni-common-mt {
	font-weight: 700;
	}
	
	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}
	// .segmented-control__text.data-v-064e9cd1{
	// 	font-size: 30rpx;
		
	// }
	
	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		.text{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 586rpx;
			font-size: 26rpx;
			color: #9a9999;
			padding-top: 164rpx;
			image{
				height: 154rpx;
				width: 294rpx;
				margin-bottom: 54rpx;
			}
		}
	}
	
	.content-text {
			

		}
	
</style>
